<template>
  <van-popup
    v-model:show="isShow"
    :round="round"
    teleport="body"
    :position="position"
    class="xlt-popup"
  >
    <div
      v-if="contentIsShow"
      class="popup-box flex flex-column"
      :style="position == 'center' ? 'width: 85vw' : 'width: 100vw'"
    >
      <div v-if="titleIsShow" class="popup-title">
        {{ popupTitle }}
      </div>
      <div class="flex1 overflow-y">
        <slot />
      </div>
      <div class="popup-footer van-hairline--top flex" v-if="showFotter">
        <div class="popup-btn popup-cancel-btn flex1" @click="cancel">
          取消
        </div>
        <div class="popup-btn popup-confirm-btn flex1 van-hairline--left" @click="confirm">
          确认
        </div>
      </div>
    </div>
    <slot v-else />
  </van-popup>
</template>

<script>
import { toRefs, computed } from 'vue';
import { useModelWrapper } from '@/hooks/utils';

export default {
  props: {
    modelValue: {
      type: Boolean,
      require: true,
      default: false
    },
    title: {
      type: String,
      default: ''
    },
    round: {
      type: Boolean,
      default: false
    },
    position: {
      type: String,
      default: 'center'
    },
    titleIsShow: {
      type: Boolean,
      default: true
    },
    showFotter: {
      type: Boolean,
      default: true
    },
    contentIsShow:{
      type: Boolean,
      default: true
    },
  },
  emits: ['onCancel', 'onConfirm', 'update:modelValue'],
  setup(props, { emit, attrs }) {
    const isShow = useModelWrapper(props, emit);

    const popupTitle = computed(() => props.title);

    const cancel = () => {
      isShow.value = false;
      emit('onCancel');
    };

    const confirm = () => {
      emit('onConfirm');
    };

    return {
      isShow,
      attrs,
      confirm,
      cancel,
      popupTitle
    };
  }
};
</script>

<style lang="scss" scoped>
.popup-box {
  width: 85vw;
  max-height: 80vh;
  border-radius: 16px;

  .popup-title {
    font-size: 34px;
    font-weight: 500;
    color: #373d52;
    line-height: 48px;
    padding: 50px 0 30px;
    text-align: center;
  }

  .popup-footer {
    width: 100%;
    .popup-btn {
      padding: 30px 0;
      text-align: center;
      font-size: 34px;
      letter-spacing: 2px;
    }

    .popup-cancel-btn {
      color: #a2a6b8;
    }

    .popup-confirm-btn {
      color: #373d52;
    }
  }
}
</style>